<template>
	<view class="container">
		<view class="status_bar">
			  <!-- 这里是状态栏 -->
	    </view>
		<uni-nav-bar>
			<view class="nav-title-cla" v-show="is_show">
				<picker ref="areaCom" class="nav-area-picker" :v-if="areaList" @change="bindPickerChange" :value="areaIndex" :range="areaList" range-key="name">
					<view class="uni-input">{{areaList[areaIndex] ? areaList[areaIndex].name : ''}}</view>
				</picker>
				<uni-icons color="#000000" type="arrowdown" size="18" @click="arrowDownClick" />
			</view>
			<view slot="left"></view>
			<view slot="right" @click="goMsg">
				<view v-bind:class="new_message ? 'nav-right-img-red-dot' : 'nav-right-img-dot'" >
					<image class="nav-right-img" mode="aspectFit" src="../../static/images/notice.png"></image>
				</view>
			</view>
		</uni-nav-bar>
		<!-- 小程序头部兼容 -->
		<!-- #ifdef MP -->
		<view class="mp-search-box">
			<input class="ser-input" type="text" value="输入关键字搜索" disabled />
		</view>
		<!-- #endif -->
		
		<!-- 头部轮播 -->
		<view class="carousel-section">
			<!-- 标题栏和状态栏占位符 -->
			<!-- <view class="titleNview-placing"></view> -->
			<!-- 背景色区域 -->
			<!-- <view class="titleNview-background" :style="{backgroundColor:titleNViewBackground}"></view> -->
			<swiper class="carousel" indicator-dots circular @change="swiperChange">
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="navToDetailPage({title: '轮播广告'})">
					<image :src="imgUrlHeader + item.adv_image" />
				</swiper-item>
			</swiper>
			<!-- 自定义swiper指示器 -->
			<!-- <view class="uni-swiper-dots uni-swiper-dots-horizontal">
				<text class="uni-swiper-dot">{{swiperCurrent+1}}</text>
				<text class="uni-swiper-dot">/</text>
				<text class="uni-swiper-dot">{{swiperLength}}</text>
			</view> -->
		</view>
		<view class="container-title">
			<!-- <text class="title-type">Types of maintenance</text> -->
		</view>
		<!-- 分类 -->
		<view class="cate-section">
			<view class="cate-content" v-for="(item, index) in featureslList" :key="index">
				<view class="cate-item" @click="cateClick(item.gc_id)">
					<view class="image-container">
						<image mode="aspectFit" :src="item.gc_img"></image>
					</view>
					<text>{{item.gc_name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
import areaPicker from "@/components/area-picker/areaPicker.vue";
import uniIcons from "@/components/uni-icons/uni-icons.vue";
import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue';
import { apiUrl } from '@/config/config.js';
import { imgApiUrl } from '@/config/config.js';
	export default {
		components: {
			uniNavBar,
			areaPicker,
			uniIcons,
			uniSwiperDot
		},
		data() {
			return {
				titleNViewBackground: '',
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [],
				featureslList: [],
				goodsList: [],
				areaList: ['The Marq123','北京'],
				areaIndex: 0,
				new_message: false,
                is_show: false,
			};
		},
		computed: {
			imgUrlHeader() {
				return imgApiUrl
			}
		},
		onShow() {
			this.loadData();
		},
		methods: {
			arrowDownClick() {
				this.$refs.areaCom.$el.click();
			},
			 bindPickerChange(e) {
				this.areaIndex = e.target.value
				this.$db.set('default_condominium', this.areaList[e.target.value].value)
                let address_id = this.areaList[e.target.value].value
                if (address_id) {
                    // 修改当前用户的 默认 address
                    let param = {address_id: address_id}
                        this.$api.saveDefaultAddr(param, res => {
                    })
                }
			},
            getUserAddress() {
                let params = {
                	// dict_type: 'condominium'
                	dict_type: 'user_address' // 查询当前用户的地址列表
                }
				this.$api.dictionary(params, res => {
					if(res.code === 1) {
						this.areaList = res.data || []
						let default_condominium = this.$db.get('default_condominium')
						if(this.areaList.length > 0) {
							if(default_condominium) { // 有默认小区
                                this.is_show = true
								let index = this.areaList.findIndex(item => { return item.value == default_condominium })
								if(index < 0) {  // 列表中没有该小区
									this.$db.set('default_condominium', this.areaList[0].value)
								} else {
									this.areaIndex = index
								}
							} else {
								this.$db.set('default_condominium', this.areaList[0].value)
							}
						}
					}
				})
            },
			/**
			 * 请求静态数据只是为了代码不那么乱
			 * 分次请求未作整合
			 */
			async loadData() {
				// 轮播图列表
				// let carouselList = await this.$api.json('carouselList');
				// this.titleNViewBackground = carouselList[0].background;
				// this.swiperLength = carouselList.length;
				// this.carouselList = carouselList;
                
                // 即时刷新
                this.new_message = false // 默认不显示新消息的红点
                // 查询新消息
                this.$api.newMessage({}, res => {
                	if(res.code === 1 && res.data.count > 0) {
                        this.new_message = true
                	} else {
                        this.new_message = false
                    }
                })
                
                if (this.is_show == false) {
                       this.getUserAddress()
                }

				if(this.goodsList.length > 0 && this.carouselList.length > 0) return;
				// 商品列表
				let goodsList = await this.$api.json('goodsList');
				this.goodsList = goodsList || [];
				
				// 功能按钮
				let featureslData = await this.$api.json('featureslList');
				this.featureslList = featureslData || [];
				
				let _this = this;
				
				// 轮播图
				this.$api.advList({ap_id: 46}, res => {
					if(res.code === 1) {
						_this.carouselList = res.data
					}
				})
				
				// 商品列表
				this.$api.homeClass(res => {
					if(res.code === 1) {
						_this.featureslList = res.data || [];
						_this.featureslList.forEach(item => {
							_this.$set(item, 'gc_img', `/static/images/goodsCalss/${item.gc_id}.svg`);
						})
						this.featureslList.push({
							gc_desc: "",
							gc_id: 0,
							gc_img: '/static/images/goodsCalss/5.png',
							gc_name: "Others",
							gc_parent_id: 0,
							list_order: 1000
						})
					}
				});
				
                _this.getUserAddress()
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
				this.titleNViewBackground = this.carouselList[index].background;
			},
			//详情页
			navToDetailPage(item) {
				return;
				//测试数据没有写id，用title代替
				let id = item.title;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
			// 分类点击
			cateClick(val) {
				let url = '/pages/category/aircon/aircon?gc_id=' + val;
				if(val <= 0) { // others分类独自跳转
					url = '/pages/category/others/others';
				}
				uni.navigateTo({
					url: url
				})
			},
			goMsg() {
				uni.switchTab({
					url: '/pages/message/message'
				})
			}
		},
		// #ifndef MP
		// 标题栏input搜索框点击
		onNavigationBarSearchInputClicked: async function(e) {
			this.$api.msg('点击了搜索框');
		},
		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.$api.msg('点击了扫描');
			} else if (index === 1) {
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			}
		}
		// #endif
	}
</script>

<style lang="scss">
	 .status_bar {
	      height: var(--status-bar-height);
	      width: 100%;
	  }
	.nav-title-cla {
		width: 80%;
		margin-left: 5%;
		text-align: center;
		.nav-area-picker {
			display: inline-block;
			width: 90%;
			vertical-align: middle;
			.uni-input {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 30rpx;
			}
		}
	}
    
    .nav-right-img-dot {
    	width: 36rpx;
    	height: 36rpx;
    	line-height: 0;
    	position: relative;
    	&::after {
    		content: "";
    		// background-color: red;
    		position: absolute;
    		right: 0;
    		top: 0;
    		width: 18px;
    		height: 18px;
    		line-height: 18px;
    		border-radius: 18px;
    		overflow: hidden;
    		transform: scale(.5) translate(40%,-40%);
    		transform-origin: 100% 0;
    	}
    }
	.nav-right-img-red-dot {
		width: 36rpx;
		height: 36rpx;
		line-height: 0;
		position: relative;
		&::after {
			content: "";
			background-color: red;
			position: absolute;
			right: 0;
			top: 0;
			width: 18px;
			height: 18px;
			line-height: 18px;
			border-radius: 18px;
			overflow: hidden;
			transform: scale(.5) translate(40%,-40%);
			transform-origin: 100% 0;
		}
	}
	.nav-right-img {
		width: 36rpx;
		height: 36rpx;
	}
	.container-title {
		background-color: #fff;
		padding-top: 30rpx;
		padding-left: 20rpx;
		.title-type {
			font-size: 16pt;
		}
	}
	/* #ifdef MP */
	.mp-search-box{
		position:absolute;
		left: 0;
		top: 30upx;
		z-index: 9999;
		width: 100%;
		padding: 0 80upx;
		.ser-input{
			flex:1;
			height: 56upx;
			line-height: 56upx;
			text-align: center;
			font-size: 28upx;
			color:$font-color-base;
			border-radius: 20px;
			background: rgba(255,255,255,.6);
		}
	}
	// page{
	// 	.cate-section{
	// 		position:relative;
	// 		z-index:5;
	// 		border-radius:16upx 16upx 0 0;
	// 		margin-top:-20upx;
	// 	}
	// 	.carousel-section{
	// 		padding: 0;
	// 		background-color: #fff;
	// 		.titleNview-placing {
	// 			padding-top: 0;
	// 			height: 0;
	// 		}
	// 		.carousel{
	// 			.carousel-item{
	// 				padding: 0;
	// 			}
	// 		}
	// 		.swiper-dots{
	// 			left:45upx;
	// 			bottom:40upx;
	// 		}
	// 	}
	// }
	/* #endif */
	
	
	page {
		background: #fff;
	}
	.m-t{
		margin-top: 16upx;
	}
	/* 头部 轮播图 */
	.carousel-section {
		background-color: #fff;
		position: relative;
		padding-top: 30rpx;

		.titleNview-placing {
			height: var(--status-bar-height);
			padding-top: 44px;
			box-sizing: content-box;
		}

		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 426upx;
			transition: .4s;
		}
	}
	.carousel {
		width: 100%;
		height: 370upx;

		.carousel-item {
			width: 100%;
			height: 100%;
			padding: 0 30upx;
			overflow: hidden;
		}

		image {
			width: 100%;
			height: 100%;
			border-radius: 10upx;
		}
	}
	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60upx;
		bottom: 15upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;

		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}
	/* 分类 */
	.cate-section {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap:wrap;
		padding: 30upx 0; 
		background: #fff;
		.cate-content {
			width: 33.333333333333%;
			display: flex;
			justify-content: center;
			.cate-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				font-size: $font-base;
				color: #fff;
				width: 200rpx;
				margin-bottom: 40rpx;
				background-color: #4666D5;
				border-radius: 20%;
				padding: 25rpx;
			}
			/* 原图标颜色太深,不想改图了,所以加了透明度 */
			.image-container {
				width: 150upx;
				height: 150upx;
				margin-bottom: 14upx;
				border-radius: 50%;
				background-color: #F7F8F9;
				padding: 25rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			text {
				font-size: $font-base;
				color: #fff;
			}
		}
	}
	.ad-1{
		width: 100%;
		height: 210upx;
		padding: 10upx 0;
		background: #fff;
		image{
			width:100%;
			height: 100%; 
		}
	}
	/* 秒杀专区 */
	.seckill-section{
		padding: 4upx 30upx 24upx;
		background: #fff;
		.s-header{
			display:flex;
			align-items:center;
			height: 92upx;
			line-height: 1;
			.s-img{
				width: 140upx;
				height: 30upx;
			}
			.tip{
				font-size: $font-base;
				color: $font-color-light;
				margin: 0 20upx 0 40upx;
			}
			.timer{
				display:inline-block;
				width: 40upx;
				height: 36upx;
				text-align:center;
				line-height: 36upx;
				margin-right: 14upx;
				font-size: $font-sm+2upx;
				color: #fff;
				border-radius: 2px;
				background: rgba(0,0,0,.8);
			}
			.icon-you{
				font-size: $font-lg;
				color: $font-color-light;
				flex: 1;
				text-align: right;
			}
		}
		.floor-list{
			white-space: nowrap;
		}
		.scoll-wrapper{
			display:flex;
			align-items: flex-start;
		}
		.floor-item{
			width: 150upx;
			margin-right: 20upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;
			line-height: 1.8;
			image{
				width: 150upx;
				height: 150upx;
				border-radius: 6upx;
			}
			.price{
				color: $uni-color-primary;
			}
		}
	}
	
	.f-header{
		display:flex;
		align-items:center;
		height: 140upx;
		padding: 6upx 30upx 8upx;
		background: #fff;
		image{
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			margin-right: 20upx;
		}
		.tit-box{
			flex: 1;
			display: flex;
			flex-direction: column;
		}
		.tit{
			font-size: $font-lg +2upx;
			color: #font-color-dark;
			line-height: 1.3;
		}
		.tit2{
			font-size: $font-sm;
			color: $font-color-light;
		}
		.icon-you{
			font-size: $font-lg +2upx;
			color: $font-color-light;
		}
	}
	/* 团购楼层 */
	.group-section{
		background: #fff;
		.g-swiper{
			height: 650upx;
			padding-bottom: 30upx;
		}
		.g-swiper-item{
			width: 100%;
			padding: 0 30upx;
			display:flex;
		}
		image{
			width: 100%;
			height: 460upx;
			border-radius: 4px;
		}
		.g-item{
			display:flex;
			flex-direction: column;
			overflow:hidden;
		}
		.left{
			flex: 1.2;
			margin-right: 24upx;
			.t-box{
				padding-top: 20upx;
			}
		}
		.right{
			flex: 0.8;
			flex-direction: column-reverse;
			.t-box{
				padding-bottom: 20upx;
			}
		}
		.t-box{
			height: 160upx;
			font-size: $font-base+2upx;
			color: $font-color-dark;
			line-height: 1.6;
		}
		.price{
			color:$uni-color-primary;
		}
		.m-price{
			font-size: $font-sm+2upx;
			text-decoration: line-through;
			color: $font-color-light;
			margin-left: 8upx;
		}
		.pro-box{
			display:flex;
			align-items:center;
			margin-top: 10upx;
			font-size: $font-sm;
			color: $font-base;
			padding-right: 10upx;
		}
		.progress-box{
			flex: 1;
			border-radius: 10px;
			overflow: hidden;
			margin-right: 8upx;
		}
	}
	/* 分类推荐楼层 */
	.hot-floor{
		width: 100%;
		overflow: hidden;
		margin-bottom: 20upx;
		.floor-img-box{
			width: 100%;
			height:320upx;
			position:relative;
			&:after{
				content: '';
				position:absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(rgba(255,255,255,.06) 30%, #f8f8f8);
			}
		}
		.floor-img{
			width: 100%;
			height: 100%;
		}
		.floor-list{
			white-space: nowrap;
			padding: 20upx;
			padding-right: 50upx;
			border-radius: 6upx;
			margin-top:-140upx;
			margin-left: 30upx;
			background: #fff;
			box-shadow: 1px 1px 5px rgba(0,0,0,.2);
			position: relative;
			z-index: 1;
		}
		.scoll-wrapper{
			display:flex;
			align-items: flex-start;
		}
		.floor-item{
			width: 180upx;
			margin-right: 20upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;
			line-height: 1.8;
			image{
				width: 180upx;
				height: 180upx;
				border-radius: 6upx;
			}
			.price{
				color: $uni-color-primary;
			}
		}
		.more{
			display:flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			flex-shrink: 0;
			width: 180upx;
			height: 180upx;
			border-radius: 6upx;
			background: #f3f3f3;
			font-size: $font-base;
			color: $font-color-light;
			text:first-child{
				margin-bottom: 4upx;
			}
		}
	}
	/* 猜你喜欢 */
	.guess-section{
		display:flex;
		flex-wrap:wrap;
		padding: 0 30upx;
		background: #fff;
		.guess-item{
			display:flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 40upx;
			&:nth-child(2n+1){
				margin-right: 4%;
			}
		}
		.image-wrapper{
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title{
			font-size: $font-lg;
			color: $font-color-dark;
			line-height: 80upx;
		}
		.price{
			font-size: $font-lg;
			color: $uni-color-primary;
			line-height: 1;
		}
	}

</style>
